<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/css/layui/layui.css}" rel="stylesheet">
    <link th:href="@{/static/css/style.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/layer/layer.css}" rel="stylesheet">
    <link th:href="@{/static/css/layui/admin.css}" rel="stylesheet">
    <link th:href="@{/static/css/element-ui.2.13.0.css}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <span style="margin-left: 92%" @click="addRole()" class="btn btn-primary">新增</span>
                <div class="layui-card-body">
                    <el-table
                            :data="tableData"
                            style="width: 100%;margin-bottom: 20px;"
                            row-key="id"
                            border
                            default-expand-all
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column
                                prop="name"
                                label="角色名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="authority"
                                label="角色权限"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="创建时间"
                                align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.row,tableData)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            layout="prev,pager,next,sizes"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="page_size"
                            :current-page="current_page"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var context = [[@{
        /}]];
</script>
<script th:src="@{/static/js/jquery.1.12.4.min.js}"></script>
<script th:src="@{/static/js/jquery.validate.min.js}"></script>
<script th:src="@{/static/js/layui/layui.js}"></script>
<script th:src="@{/static/js/layui/lay/modules/layer.js}"></script>
<script th:src="@{/static/js/vue.2.6.11.js}"></script>
<script th:src="@{/static/js/element-ui.2.13.0.js}"></script>
<script th:src="@{/static/js/modules/role/role.js}"></script>
</body>
</html>